<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
</head>
<style>
    .system_name_table {
        height: 300px;
        width: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .system-name-text {
        width: 160px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .system-name-table-tr {
        background: #fff;
    }
</style>

<body>
    测试选：<input id="SYSTEM_NAME" onfocus="focusSystem()"></input>
    <table id="SYSTEM_NAME_TABLE" class="system_name_table">
        <tr class="system-name-table-tr">
            <td><input type="checkbox" onclick="selectAll()" /></td>
            <td>
                <div>全选</div>
            </td>
        </tr>
    </table>
</body>
<script>
    console.log($("#SYSTEM_NAME_TABLE"))

    $("#SYSTEM_NAME_TABLE").css('display', 'none')

    function focusSystem() {
        $("#SYSTEM_NAME_TABLE").css('display', 'block')
    }

    document.addEventListener('click', function (event) {
        var targetElement = event.target;

        // 检测被点击的元素及其祖先元素是否是指定的table或其子元素
        var isClickedInsideTable = targetElement.closest('#SYSTEM_NAME_TABLE') !== null;
        var isClickedInsideInput = targetElement.closest('#SYSTEM_NAME') !== null;

        if (!isClickedInsideTable && !isClickedInsideInput) {
            console.log('点击不在table内部')
            $("#SYSTEM_NAME_TABLE").css('display', 'none')
            var checkboxes = document.querySelectorAll('#SYSTEM_NAME_TABLE input[type="checkbox"]');
            var selectedValues = [];
            var selectedName = []

            checkboxes.forEach(item => {
                if (item.checked) {
                    selectedValues.push(item.value);
                    selectedName.push(item.name)
                }
            })

            console.log(selectedValues, selectedName.join(','));
            $("#SYSTEM_NAME").val(selectedName.join(","));
            $('#SYSTEM_NAME').data('ids', selectedValues.join(','));

            console.log('选择的id=====', $("#SYSTEM_NAME").data())
        }
    });

    function selectAll() {
        let selected = 0
        var checkboxes = document.querySelectorAll('#SYSTEM_NAME_TABLE input[type="checkbox"]');
        checkboxes.forEach(item => {
            if (item.checked) {
                selected++;
            }
        })
        var isChecked = selected === checkboxes.length - 1;

        checkboxes.forEach(item => {
            item.checked = !isChecked;
        });
    }



    function addSystemName() {
        for (let i = 0; i < 20; i++) {
            var table = $('#SYSTEM_NAME_TABLE');

            // 创建新的行（<tr>）
            var newRow = $('<tr class="system-name-table-tr">');

            // 创建单元格，并添加到新行中
            var checkboxCell = $('<td>').append('<input type="checkbox" value="' + i + '" name="' + "文字" + i + '" />');
            var textCell = $('<td>').append('<div class="system-name-text" title="' + "文字" + i + '">' + "文字" + i + '</div>');
            newRow.append(checkboxCell, textCell);

            // 将新行添加到表格中
            table.append(newRow);
        }
    }

    addSystemName()
</script>

</html>